<!-- 深圳ABB电动交通科技有限公司 -->
<template>
  <div class="abb-page">
    <div class="display-flex">
      <div class="flex-1">
        <img
          src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/dxgjAdmin/userImg/logo1658470349386.png"
        />
      </div>
    </div>
    <div class="dingtubjer">
      <img class="w100 h100 imgjz" :src="banner" v-if="banner" />
      <div class="jjhhserr vertical-center sz" @click="photoShowModaler = true">
        +点击修改顶图
      </div>
    </div>
    <p class="fz32 mb10">
      <span class="henxinase ab"></span><br />
      <n-input
        v-model:value="title"
        placeholder=""
        size="medium"
        class="fz32"
        @blur="shujuesan"
      />
    </p>
    <div class="mt20 fz22">
      <n-input
        class="fz22 br0"
        placeholder=""
        type="textarea"
        size="medium"
        v-model:value="introduce"
        clearable
        @blur="shujueer"
      ></n-input>
    </div>

    <p class="fz26 bbm mt60">
      <span
        class="title-context sz"
        :class="jhnnerr == 0 ? 'act' : ''"
        @click="jhnnerr = 0"
        >公司里程碑</span
      >
      <span
        class="title-context sz"
        :class="jhnnerr == 1 ? 'act' : ''"
        @click="jhnnerr = 1"
        >联系我们</span
      >
    </p>

    <div class="mt20" v-if="jhnnerr == 0">
      <n-input
        class="fz22 br0 dsfsdrtrere"
        placeholder=""
        type="textarea"
        size="medium"
        v-model:value="case1"
        clearable
        @blur="shujuesi"
      ></n-input>
    </div>

    <div class="mt20" v-if="jhnnerr == 1">
      <n-input
        class="fz22 br0 dsfsdrtrere"
        placeholder=""
        type="textarea"
        size="medium"
        v-model:value="case2"
        clearable
        @blur="shujuewu"
      ></n-input>
    </div>

    <n-modal
      v-model:show="photoShowModaler"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>上传banner</div>
      </template>
      <div>
        <photoGallery
          @getImg="getImger"
          types="电动交通科技有限公司"
        ></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModaler = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="geturler"> 确定 </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
 <script lang='ts' setup>
import { nextTick, ref } from "vue";
import { dxget, dialog, dxdel, dxpost, hf } from "../../../util";
import photoGallery from "../../../components/util/photoGallery";
const banner = ref();
const photoShowModaler = ref(false);
const title = ref("");
const introduce = ref("");
const case1 = ref("");
const case2 = ref("");
const jhnnerr = ref(0);
const shujueer = () => {
  upDataHome({ introduce: introduce.value });
};
const shujuesan = () => {
  upDataHome({ title: title.value });
};
const shujuesi = () => {
  upDataHome({ case1: case1.value });
};

const shujuewu = () => {
  upDataHome({ case2: case2.value });
};
const upDataHome = async (cs) => {
  const { errno }: any = await dxpost(
    "abb/abbhomeBj",
    {
      id: 6,
      ...cs,
    },
    "put"
  );
  if (errno == 0) {
    window.$message.success("修改成功！");
  }
};

let videUrler = "";
const getImger = (data) => {
  videUrler = data;
};

const geturler = () => {
  photoShowModaler.value = false;
  banner.value = videUrler;
  upDataHome({ banner: videUrler });
};

const initData = async () => {
  const { data }: any = await dxget("abb/abbhomeBj", { id: 6 });
  banner.value = data.banner;
  introduce.value = data.introduce;
  title.value = data.title;
  introduce.value = data.introduce;
  case1.value = data.case1;
};
initData();
</script>
 <style scoped>
.dingtubjer {
  height: 445px;
  background: #f8f8f8;
  position: relative;
}
.jjhhserr {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  font-size: 40px;
  color: #f8f8f8;
  display: none;
}
.dsfsdrtrere {
  height: 600px;
}
.dingtubjer:hover .jjhhserr {
  display: flex;
}
</style>